<template>
  <view class="swiper-container">
    <swiper :bindchange="handleChange" :bindanimationfinish="handleAnimationFinish">
      <swiper-item v-for="(item, index) in imageList" :key="index">
        <view ref="pageRef{{index}}">
          <image :src="item.src" mode="aspectFit"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        { src: '' },
        { src: 'https://img1.baidu.com/it/u=2233335867,2572753894&fm=253&fmt=auto&app=138&f=JPEG?w=382&h=500' },
        { src: 'https://img0.baidu.com/it/u=2491058522,3264362768&fm=253&fmt=auto&app=138&f=GIF?w=500&h=667' }
      ],
      currentPage: 0,
      prevPage: 0,
      scale: 2,
      translateX: 0,
      translateY: 0
    }
  },
  methods: {
    handleChange(e) {
      this.prevPage = this.currentPage
      this.currentPage = e.detail.current
    },
    handleAnimationFinish() {
      const current = this.$refs[`pageRef${this.currentPage}`][0]
      const prev = this.$refs[`pageRef${this.prevPage}`][0]

      // 获取当前页和上一页的缩放比例和偏移量
      const currentScale = current.dataset.scale || 1
      const currentTranslateX = current.dataset.translateX || 0
      const currentTranslateY = current.dataset.translateY || 0

      const prevScale = prev.dataset.scale || 1
      const prevTranslateX = prev.dataset.translateX || 0
      const prevTranslateY = prev.dataset.translateY || 0

      // 设置当前页和上一页的图片样式
      current.style.transform = `scale(${currentScale}) translate(${currentTranslateX}px, ${currentTranslateY}px)`
      prev.style.transform = `scale(${prevScale}) translate(${prevTranslateX}px, ${prevTranslateY}px)`
    }
  }
}
</script>